<template>
	<view class="content">
		<view class="user tn-flex tn-flex-col-center"
			@click="navigateToFn({ url: '/minePages/edit', checkLogin: true })">
			<view class="left">
				<image :src="body.avatar" mode="aspectFill"></image>
				<!-- <image :src="gift_bag2" mode="" class="touxiangkuang" v-if="gift_bag2"></image> -->
			</view>
			<view class="center">
				<view class="name tn-flex tn-flex-col-center">
					<text class="n1">{{body.nickname}}</text>
					<!-- <view class="grade" v-if="body.vip==0&&configInfo.is_lv">LV{{body.lv}}</view>
					<view class="grade" v-if="body.vip==1">VIP{{body.vip_lv}}</view> -->
				</view>
				<view class="ID">ID：{{body.id}}</view>
				<!-- <view class="p">
					<tn-line-progress :height="8" :percent="baifenbi" activeColor="#9D5EF4"></tn-line-progress>
				</view>
				<view class="p-text">Lv{{body.lv}} 还差{{chajifen}}积分升级</view> -->
			</view>
			<view class="right" @click.stop="navigateToFn({ url: '/minePages/set', checkLogin: true })">
				<image src="/static/index/set.png" mode="aspectFill"></image>
			</view>
		</view>
		<view class="fans-tabs tn-flex tn-flex-col-center tn-flex-row-between">
			<view class="fans-tabs-item" @click="goPage('/circlePages/fans?type=fans')">
				<text class="t1">{{body.fansi}}</text>
				<text class="t2">粉丝</text>
			</view>
			<view class="fans-tabs-item" @click="goPage('/circlePages/fans?type=follow')">
				<text class="t1">{{body.guanzhu}}</text>
				<text class="t2">关注</text>
			</view>
			<view class="fans-tabs-item" @click="goPage('/minePages/msg-son-page/upvote')">
				<text class="t1">{{body.zhan}}</text>
				<text class="t2">获赞</text>
			</view>
		</view>
		<!-- 会员vip -->
		<!-- <view class="vip-bg tn-flex" @click="goVip">
			<image src="/static/my/vipIcon.png" class="vipIcon" mode=""></image>
			<image src="/static/my/vipText.png" class="vipText" mode=""></image>
			<view class="xian"></view>
			<view class="title">开通VIP享受专属权益</view>
			<view class="vip-btn">立即开通</view>
		</view> -->
		<view class="tagList tn-flex">
			<view class="tag1" @click="goPeiIndex"></view>
			<view class="tag2" @click="goMyPlayWith"></view>
			<view class="tag2 tag3" @click="goChongZhi"></view>
		</view>

		<view class="operation">
			<block v-for="(item,index) in operationList" :key="index">
				<!-- #ifndef MP-WEIXIN -->
				<view class="operation-item" @click="goPage(item.pageUrl)">
					<image :src="item.img" mode="aspectFill"></image>
					<view>{{item.name}}</view>
				</view>
				<!-- #endif -->
				<!-- #ifdef MP-WEIXIN -->
				<view class="operation-item" @click="goPage(item.pageUrl)" v-if="item.pageUrl != '/minePages/share'">
					<image :src="item.img" mode="aspectFill"></image>
					<view>{{item.name}}</view>
				</view>

				<button open-type="share" class="operation-item share-btn" v-else>
					<image :src="item.img" mode="aspectFill"></image>
					<view>{{item.name}}</view>
				</button>
				<!-- #endif -->

			</block>
			<view style="height: 90px;width: 100%;"></view>
		</view>
		<!-- 登录框组件 -->
		<!-- 	<login-fn :is-show-login="loginBoxFlag" @loginSuccessCallback="refreshFn" @close="closeGlobalLoginFn">
		</login-fn> -->

		<!-- modal框 -->
		<modal ref="modal" type="1" :content="contentTex" @confirm="modalConfirm"></modal>
	</view>
</template>
<script>
	import {
		requestPermission
	} from "@/tools/permision.js"
	export default {
		data() {
			return {
				operationList: [
					// {
					// 	img: 'https://peiwanblogs.huolieniaowangluo.com/wx-image/wfw/1.png',
					// 	name: '任务中心',
					// 	pageUrl: '/minePages/qiandao'
					// },
					{
						img: 'https://peiwan.youyuejia.top/wx-image/wfw/fenxiao.png',
						name: '我的分销',
						pageUrl: '/homePages/fenxiao'
					},
					{
						img: 'https://peiwan.youyuejia.top/wx-image/wfw/active.png',
						name: '我的活动',
						pageUrl: '/homePages/active'
					},
					{
						img: 'https://peiwanblogs.huolieniaowangluo.com/wx-image/wfw/2.png',
						name: '我的主页',
						pageUrl: '/circlePages/blogger_other_user?type=1'
					},
					// {
					// 	img: 'https://peiwanblogs.huolieniaowangluo.com/wx-image/wfw/3.png',
					// 	name: '我的礼物',
					// 	pageUrl: '/playcenterPage/my-gift'
					// },
					{
						img: 'https://peiwanblogs.huolieniaowangluo.com/wx-image/wfw/4.png',
						name: '我的动态',
						pageUrl: '/playcenterPage/my-dynamic'
					},
					// {
					// 	img: 'https://peiwanblogs.huolieniaowangluo.com/wx-image/wfw/13.png',
					// 	name: '黑名单',
					// 	pageUrl: '/playcenterPage/blacklist'
					// },
					// {
					// 	img: 'https://peiwanblogs.huolieniaowangluo.com/wx-image/wfw/5.png',
					// 	name: '商品订单',
					// 	pageUrl: '/shopPages/order'
					// },
					// {
					// 	img: 'https://peiwanblogs.huolieniaowangluo.com/wx-image/wfw/6.png',
					// 	name: '我的团队',
					// 	pageUrl: '/playcenterPage/my-team'
					// },
					// {
					// 	img: 'https://peiwanblogs.huolieniaowangluo.com/wx-image/wfw/7.png',
					// 	name: '我的约玩',
					// 	pageUrl: '/playcenterPage/my-about'
					// },
					// {
					// 	img: 'https://peiwanblogs.huolieniaowangluo.com/wx-image/wfw/8.png',
					// 	name: '我的背包',
					// 	pageUrl: '/playcenterPage/my-knapsack'
					// },
					// {
					// 	img: 'https://peiwanblogs.huolieniaowangluo.com/wx-image/wfw/9.png',
					// 	name: '道具商城',
					// 	pageUrl: '/minePages/daoju'
					// },
					{
						img: 'https://peiwanblogs.huolieniaowangluo.com/wx-image/wfw/10.png',
						name: '邀请好友',
						pageUrl: '/minePages/share'
					},
					// {
					// 	img: 'https://peiwanblogs.huolieniaowangluo.com/wx-image/wfw/11.png',
					// 	name: '地址管理',
					// 	pageUrl: '/shopPages/address'
					// },
					{
						img: 'https://peiwanblogs.huolieniaowangluo.com/wx-image/wfw/12.png',
						name: '帮助中心',
						pageUrl: '/homePages/about?id=32'
					},
					{
						img: 'https://peiwanblogs.huolieniaowangluo.com/wx-image/wfw/14.png',
						name: '在线客服',
						pageUrl: '/minePages/chat/talkkefu?toid=1&toname=官方客服'
					},
					{
						img: '/static/my/kefu.png',
						name: '电话客服',
						pageUrl: 'teleKefu'
					}
				],
				loginBoxFlag: false, // 登录框显示隐藏状态
				loginis: '',
				baifenbi: 0,
				chajifen: 0,
				body: {
					nickname: '默认',
					fansi: 0,
					guanzhu: 0,
					zhan: 0,
					chajifen: 0,
					id: '0000'
				},
				contentTex: '您的申请已驳回，请重新提交',
				gift_bag2: ""
			}
		},
		onLoad() {
			let that = this
			that.loginis = uni.getStorageSync('token')
			// uni.$off('setLoginBoxFlag_indexmine');
			// uni.$on('setLoginBoxFlag_indexmine', loginBoxFlag => {
			// 	that.loginis = uni.getStorageSync('token')
			// 	that.loginBoxFlag = loginBoxFlag;
			// });
			// uni.$on("loginok", async (res) => {
			// 	console.log('登录成功')
			// 	that.loginis = uni.getStorageSync('token')
			// 	this.infobody()
			// })
		},
		onShow() {
			this.infobody()
		},
		onShareAppMessage(res) {
			return {
				title: '分享', //分享的名称
				path: '/pages/index?daren_id=' + uni.getStorageSync('user_id'),
			}
		},
		methods: {
			goVip() {
				uni.navigateTo({
					url: "/minePages/vip"
				})
			},
			goPeiIndex() {
				if (this.body.is_play == 0 || this.body.is_play == 1) {
					uni.navigateTo({
						url: "/playcenterPage/manito-zheng?type=" + this.body.is_play
					})
				} else if (this.body.is_play == 2) {
					uni.navigateTo({
						url: "/playcenterPage/index"
					})
				} else if (this.body.is_play == 3) {
					this.$refs['modal'].open()
				}
			},
			modalConfirm() {
				this.$refs['modal'].close()
				uni.navigateTo({
					url: "/playcenterPage/manito-zheng?type=" + this.body.is_play
				})
			},
			goMyPlayWith() {
				uni.navigateTo({
					url: "/playcenterPage/my-Play-with"
				})
			},
			goChongZhi() {
				uni.navigateTo({
					url: "/minePages/gift/chongzhi"
				})
			},
			async goPage(url) {
				if (url == 'teleKefu') {
					if (this.$isAndroid) {
						const callPhonePermission = await requestPermission("callPhone")
						if (callPhonePermission != 1) return
					}

					uni.makePhoneCall({
						phoneNumber: this.$customerPhoneNumber
					})
					return
				}
				this.navigateToFn({
					url,
					checkLogin: true
				})
			},
			refreshFn() {
				this.infobody()
			},
			infobody() {
				let that = this
				if (!uni.getStorageSync('token')) {
					that.info()
					that.loginBoxFlag = true
					return false;
				} else {
					that.info()
				}
			},
			async info() {
				try {
					let that = this;
					let result = await that.$request({
						loading: 0,
						method: 'post',
						url: '/api/index/GetUser',
						data: {}
					});
					that.body = result.data.data.userinfo;
					if (that.body.id) {
						if (that.body.lv_score < -1) {
							that.body.lv_score = that.body.lv_score * -1
						}
						that.baifenbi = that.body.lv_score / that.body.user_leve_once * 100
						that.chajifen = that.body.user_leve_once - that.body.lv_score
						if (that.body.gift_bag2) {
							that.gift_bag2 = that.body.gift_bag2.gift_image
						}
					}
				} catch (e) {
					uni.showToast({
						icon: 'none',
						title: e.data.msg
					});
					//TODO handle the exception
				}


			},

		}
	}
</script>
<style>
	page {
		background: #ffffff;
	}
</style>
<style lang="scss" scoped>
	.content {
		padding: 50px 15px 0 15px;
		background: url("../../static/top-bg.png") no-repeat;
		background-size: 100% 250px;
		height: 100vh;

		.user {
			padding: 20rpx 0;

			.left {
				width: 160rpx;
				height: 160rpx;
				position: relative;

				image {
					width: 100%;
					height: 100%;
					border-radius: 50%;
				}

				.touxiangkuang {
					width: 240rpx;
					height: 240rpx;
					position: absolute;
					top: -36rpx;
					left: -44rpx;
				}
			}

			.center {
				flex: 1;
				padding-left: 32rpx;

				.name {
					.n1 {
						font-size: 32rpx;
						font-weight: bold;
						color: #333333;
					}

					.grade {
						background-color: #69B7FD;
						font-size: 22rpx;
						font-weight: 500;
						color: #FFFFFF;
						padding: 5rpx 10rpx;
						border-radius: 20rpx;
						margin-left: 12rpx;
					}
				}

				.ID {
					font-size: 26rpx;
					font-weight: 400;
					color: #333333ad;
					margin-top: 10rpx;
				}

				.p {
					/deep/.tn-line-progress {
						width: 65%;
					}
				}

				.p-text {
					font-size: 22rpx;
					font-weight: 400;
					color: #333333ad;
					margin-top: 8rpx;
				}
			}

			.right {
				image {
					width: 40rpx;
					height: 37rpx;
				}

			}
		}

		.fans-tabs {
			height: 160rpx;
			padding: 0 34rpx;

			//background:#f4e6cc;
			.fans-tabs-item {
				display: flex;
				flex-direction: column;
				align-items: center;
			}

			text {
				font-weight: 500;
			}

			.t1 {
				font-weight: 600;
				font-size: 32rpx;
				margin-bottom: 14rpx;
				color: #080808;
			}

			.t2 {
				font-size: 26rpx;
				color: #333333ad;
			}
		}

		.vip-bg {
			height: 108rpx;
			//background: #0b0216;
			background: url("https://peiwanblogs.huolieniaowangluo.com/wx-image/wfw/vipbg.png") no-repeat;
			background-size: 100% 100%;
			align-items: center;
			padding: 0 48rpx;
			border-top-left-radius: 8px;
			border-top-right-radius: 8px;

			.vipIcon {
				width: 44rpx;
				height: 37rpx;
				margin-right: 16rpx;
			}

			.vipText {
				width: 68rpx;
				height: 35rpx;
				margin-right: 24rpx;
			}

			.xian {
				width: 3rpx;
				height: 19rpx;
				background: #D3B89A;
				border-radius: 60rpx;
				margin-right: 24rpx;
			}

			.title {
				font-size: 24rpx;
				font-weight: 400;
				color: #865D1D;
				margin-right: 50rpx;
			}

			.vip-btn {
				width: 75px;
				height: 28px;
				background: #424240;
				border-radius: 16px;
				font-size: 13px;
				font-weight: 400;
				color: #F0DFBD;
				text-align: center;
				line-height: 28px;
			}
		}

		.tagList {
			justify-content: space-between;
			margin-top: 32rpx;

			.tag1 {
				width: 338rpx;
				height: 169rpx;
				background: url("../../static/my/tag1.png") no-repeat;
				background-size: 100% 100%;

			}

			.tag2 {
				width: 171rpx;
				height: 169rpx;
				background: url("../../static/my/tag2.png") no-repeat;
				background-size: 100% 100%;
			}

			.tag3 {
				background: url("https://peiwanblogs.huolieniaowangluo.com/wx-image/wfw/tag3.png") no-repeat;
				background-size: 100% 100%;

			}
		}


		.operation {
			height: 350px;
			background: #efefef;
			border-radius: 11px;
			display: flex;
			flex-wrap: wrap;
			margin-top: 17px;
			padding: 10px 0;

			//margin-bottom: 50px;
			.operation-item {
				width: 25%;
				height: 25%;
				display: flex;
				flex-direction: column;
				justify-content: center;
				align-items: center;

				image {
					width: 52rpx;
					height: 52rpx;
				}

				view {
					font-size: 28rpx;
					font-weight: 400;
					color: #080808;
					margin-top: 16rpx;
				}
			}
		}

		.share-btn {
			border: none;
			border-radius: 0;
			background-color: transparent;
		}

		.share-btn::after {
			border: none;
		}
	}
</style>